<!doctype html>
<html>


	<head>
		<meta charset="utf-8">
		<title>左右选项卡</title>
		<style>
			* {
			  text-decoration: none;
				padding: 0;
				margin: 0;
				list-style: none;
			}

			div {
				width: 300px;
				height: 300px;
				margin: 100px auto;
			}

			input {
				width: 100px;
				float: left;
				height: 30px;
			}

			.active {
				background: black;
				color: white;
			}

			li {
				width: 300px;
				height: 270px;
				background: green;
				font-size: 100px;
				text-align: center;
				line-height: 270px;
				color: yellow;
				display: none;
			}

			.show {
				display: block;
				width: 300px;
        color: white;
			}

			section {
				overflow: hidden;
			}
			header{
			  position: absolute;
        top: 69px;
        left: 43%;
				width: 300px;
				height: 30px;
			}
		</style>
		<script>
			class Tab {
				constructor(str) {
					this.aBtnList = document.querySelectorAll('.btnBox input');
					this.aLiList = document.querySelectorAll('.tab li');
					this.left = document.querySelector(".left");
					this.right = document.querySelector(".right");
					this.show();
				}
				show() {
					var _this = this;
					for(let i = 0; i < this.aBtnList.length; i++) {
						this.aBtnList[i].onclick = function() {
							_this.index = i;
							_this.fn(i);
						};
					};


				}
				fn(i) {
					for(var j = 0; j < this.aLiList.length; j++) {
						this.aBtnList[j].className = '';
						this.aLiList[j].className = '';
					}
					this.aLiList[i].className = 'show';
					this.aBtnList[i].className = 'active';
				}
			}


			class leftRightTab extends Tab {
				constructor(str) {
					super(str);
					this.leftRight();
					this.index = 0;
				}
				leftRight() {
					var _this = this;
					this.left.onclick = function() {
						_this.index--
							if(_this.index < 0) {
								_this.index = _this.aBtnList.length - 1;
							}
						_this.fn(_this.index);
					}
					this.right.onclick = function() {
						_this.index++
							if(_this.index == _this.aBtnList.length) {
								_this.index = 0;
							}
						_this.fn(_this.index);
					}
				}
			}
			window.onload = function() {
				new Tab(".tab");
				new leftRightTab('.tab');
			}
		</script>
	</head>


	<body>
    <header>
      <input type="button" value="左" class="left" />
      <input type="button" value="右" class="right" />
    </header>
		<div class="tab">

			<section class="btnBox">
				<input class="active" type="button" value="按钮1" />
				<input type="button" value="按钮2" />
				<input type="button" value="按钮3" />
			</section>

			<ul>
				<li class="show">1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
	</body>
</html>
